<!--
 * @Author: yanghui
 * @Date: 2024-12-23 14:04:10
 * @LastEditors: yh2935159613 2935159613@qq.com
 * @LastEditTime: 2025-07-14 17:11:37
 * @FilePath: \deploy_yh_work3_success\yh_work3\src\views\ComLibrary\FileUpload.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="fileUpload">
    <div>
      <BlockBox width="50%" height="300px">
        <template #title>文件上传</template>
        <template #content>
          <el-button @click="selectFile">selectFile</el-button>
          {{uploadName || '未选择任何文件'}}
          <el-button @click="uploadFile">upload</el-button>
          <el-button @click="clearFile">clearFile</el-button>
          <br>
          <br>
          <input type="file" id="selectFileInput"/>
          <br>
          <br>
          <div>
            <span>{{fileInput}}</span>
            <iframe :src="fileInput" frameborder="0" width="500" height="130"></iframe>
          </div>
        </template>
      </BlockBox>
    </div>
    <div style="margin-top: 50px">
      <BlockBox width="50%" height="300px">
        <template #title>文件分片上传/暂停上传/断点续传</template>
        <template #content>
          <UploadFile></UploadFile>
        </template>
      </BlockBox>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue"
import BlockBox from "@/components/BlockBox"
import UploadFile from "@/components/UploadFile";

let fileInput = ref(null)
const selectFile = () => {
  let elNode = document.getElementById('selectFileInput')
  elNode.click()
}
const uploadFile = () => {
  let elNode = document.getElementById('selectFileInput')
  console.log(elNode.files)
  let fileReader = new FileReader()
  fileReader.readAsDataURL(elNode.files[0])
  fileReader.onload = (e) => {      
    fileInput.value = e.target.result
  }
}
const clearFile = () => {
  let elNode = document.getElementById('selectFileInput')
  elNode.value = ''
  uploadName.value = ''
}
let uploadName = ref('')

onMounted(() => {
  document.getElementById('selectFileInput').onchange = (e) => {
    uploadName.value = e.target.files[0]?.name
  }
})

</script>

<style scoped lang="less">
.fileUpload {

}
</style>